<template>
  <div class="elective_sarch">
    <div class="nav_body">
      <van-nav-bar
          v-if="$store.state.device !== 'APP'"
          left-text="返回"
          left-arrow
          @click-left="$router.go(-1)"/>
      <van-search id="van_search" placeholder="搜索最适合我的学习" v-model="searchValue" shape="round" @clear="clearArticleList" @search="getArticleList"/>
    </div>
    <div v-if="searchActive" class="sarch_title_list">
      <p class="title_alt">热门搜索</p>
      <div class="label_list">
        <span v-for="item in screenLabelData" :key="item"  @click="searchValue = item ;getArticleList()">
          {{item}}
        </span>
      </div>
    </div>
    <div v-else class="major choose_box">
      <div class="list">
        <ul>
          <van-list
              v-model="loading"
              :finished="finished"
              @load="onLoad">
            <li v-for="(item, index) in listData" :key="item.product_id +' '+ index" @click="$router.push({ path:'/elective-detail', query:{ id: item.product_id }})">
              <img :src="item.product_image[0] ? item.product_image[0].image_url : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
              <div class="info">
                <h3>{{item.product_name}}</h3>
                <p>{{item.sign_up_num}}人预约报名</p>
                <span v-for="itemTag in item.tag" :key="itemTag.tag_id"><i class="ico_hot"></i>{{itemTag.tag_name}}</span>
              </div>
            </li>
            <!--加载状态-->
            <div v-if="loading">
              <van-skeleton
                  style="margin-top: 30px"
                  title
                  v-for="item in 5" :key="item"
                  :row="2">
              </van-skeleton>
            </div>
          </van-list>
          <div v-if="footerShow" class="no_data_title">
<!--            <img src="../../../assets/img/modules/media/icon_v2_4.png" alt="">-->
            <p>没有内容了~</p>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'elective_sarch',
  components: {},
  data () {
    return {
      loading: false, // 上拉加载
      finished: false, // 上拉加载
      footerShow: false, // 底部标志显示
      searchActive: true, // 搜索框显示
      listData: [],
      screenLabelData: ['行政管理', '人力资源管理', '专升本', '运营管理', '高起专'],
      tag_id: '',
      searchValue: '', // 搜索内容
      major_type_id: '',
      current: 1, // 当前页
      size: 5 // 每页条数
    }
  },
  props: {},
  watch: {},
  methods: {
    /*
     *@author wf_Huang
     *@Time 2019/8/18 0018 18:30
     *@function  获取列表
     *****************************************/
    getList () {
      this.$http({
        url: `${window.SITE_CONFIG['readSetURL']}/apis/getSaleProductList.html?page=${this.current}&limit=${this.size}&product_name=${this.searchValue}&learn_center_id=${this.$store.state.elective.center_id}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          this.$toast('文章列表查询失败~')
          return false
        }
        if (res.data.list.length < this.size) {
          this.footerShow = true
          this.finished = true
        } else {
          this.footerShow = false
        }
        res.data.list.forEach(item => {
          this.listData.push(item)
        })
        this.loading = false
        this.current = this.current + 1
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/12 0012 18:00
     *@function  上拉刷新 加载
     *****************************************/
    onLoad () {
      this.getList()
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/12 0012 21:27
     *@function  删除内容
     *****************************************/
    clearArticleList () {
      this.searchActive = true
      this.listData = []
      this.current = 1
      this.finished = false
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/20 0020 9:20
     *@function  搜索内容
     *****************************************/
    getArticleList () {
      this.searchActive = false
      this.listData = []
      this.current = 1
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    document.getElementById('van_search').focus()
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .elective_sarch {
    .nav_body{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 99;
      background-color: #ffffff;
      box-shadow: 0 2px 12px 0 rgba(153, 153, 153, 0.14);
    }
    .sarch_title_list{
      margin-top: 200px;
      padding: 32px;
      .label_list {
        font-size: 0;
        overflow: hidden;
        margin-bottom: -20px;
        margin-right: -20px;
        span {
          display: inline-block;
          height: 54px;
          line-height: 54px;
          font-size: 24px;
          color: #666;
          padding: 0 20px;
          border: 2px solid #e5e5e5;
          margin-right: 20px;
          margin-bottom: 20px;
          border-radius: 4px;
          .ico_hot {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-left: 10px;
            position: relative;
            top: 2px;
          }
          span:active {
            color: #ff0000;
            border-color: #ff0000;
          }
        }
      }
      .title_alt{
        font-size: 26px;
        color: #666666;
        margin: 0 0 20px 0;
      }
    }
    .choose_box{
      background: #fff;
      padding: 210px 30px 40px;
      margin-bottom:20px;
    }
    .major{
      font-size:0;
      .list{
        ul{
          li{
            overflow:hidden;
            height:180px;
            margin-bottom:30px;
            img{
              width:180px;
              height:180px;
              float:left;
              margin-right:30px;
            }
            .info{
              overflow:hidden;
              h3{
                font-size:32px;
                color:#222;
                line-height:44px;
                height:80px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                -webkit-line-clamp: 2;
                margin:0 0 20px;
              }
              p{
                font-size:24px;
                color:#666;
                margin:0 0 20px;
              }
              span{
                display:inline-block;
                height:34px;
                line-height:34px;
                background:#FFF8EB;
                font-size:22px;
                margin-right: 10px;
                color:#FF0000;
                padding:0 15px;
                border-top-left-radius: 17px;
                border-bottom-right-radius: 17px;
                .ico_hot{
                  display: inline-block;
                  width: 16px;
                  height: 20px;
                  background: url(../../../assets/img/modules/elective/icon_hot.png)
                  no-repeat;
                  background-size: 16px 20px;
                  margin-right: 10px;
                  position: relative;
                  top: 2px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
